<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
        </f:facet>
        <title>PrimeFaces Omega</title>
    </h:head>
    <h:body class="login-body">
        <h:outputStylesheet library="omega-layout" name="css/layout.css"/>

        <div id="login-wrapper">
            <p:graphicImage value="#{resource['omega-layout:images/login-logo.png']}"/>

            <div id="login-container">
                <span class="title">Omega</span>

                <div class="ui-g ui-fluid">
                    <div class="ui-g-12">
                        <p:inputText placeholder="Username"/>
                    </div>
                    <div class="ui-g-12">
                        <p:password placeholder="Password"/>
                    </div>
                    <div class="ui-g-12 ui-md-6">
                        <span class="remember-me">Remember Me</span>
                        <p:selectBooleanCheckbox/>
                    </div>
                    <div class="ui-g-12 ui-md-6">
                        <p:link value="Forgot Password" outcome="/login.xhtml"/>
                    </div>
                    <div class="ui-g-12">
                        <p:button value="Login" icon="fa fa-check" outcome="/dashboard.xhtml"/>
                    </div>
                </div>
            </div>

            <div class="login-footer">PrimeFaces Omega</div>
        </div>
    </h:body>
</html>